<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件v-on测试</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id ="app">
        <button @click="showMessage">点击我</button>   <!--@click就是v-on:click的简写> 不指定参数时，event会自动传递-->
        <button @click="showEventMessage($event)">点击我传送EVENT</button>  <!--显式指定event-->
        <button @click="showEventMessageValue(66,$event)">点击我传送VALUE</button>   <!--带参数-->
    </div>
     
     <script>
        Vue.config.productionTip = false //阻止vue启动时生成生产提示

        new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            },
            methods: {
                showMessage(event) {  //不指定参数时，event会自动传递
                    console.log(event) //拿到事件对象
                    alert(this.msg)
                },
                 showEventMessage(event) {
                    console.log(event) //拿到事件对象 
                    console.log(event.target) //拿到事件的整个dom节点对象
                    console.log(event.target.innerText) //根据打印的事件获取事件内部的方法
                },
                showEventMessageValue(value, event) {
                    console.log("传递的值为:", value)
                    console.log(event) //拿到事件对象 
                    console.log(event.target) //拿到事件的整个dom节点对象
                    console.log(event.target.innerText) //根据打印的事件获取事件内部的方法

                }
            }
        })
       
     </script>

</body>
</html></html>